<template>
  <view class="container">
    <view>
      <view class="background-white">
        <view class="flex text bor-btm">
          任务名称：<text>{{ baseInfo.taskName }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检类型：<text>{{ baseInfo.inspectionTypeLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检周期：<text>{{ baseInfo.executionCycleDicLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检岗位：<text>{{ baseInfo.executionPostNameLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检人：<text>{{ baseInfo.executionUserNameLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          当前巡检人：<text>{{ baseInfo.executionUserName }}</text>
        </view>
        <view class="flex text bor-btm">
          完成条件：<text>{{ baseInfo.finishConditionLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          是否总评：<text>{{ commentFlag(baseInfo.overallCommentFlag) }}</text>
        </view>
      </view>
    </view>
    <view class="bor-top form-text">表单历史巡查情况</view>
    <view class="grid-body mt-30" v-for="(item, index) in positionDealList" :key="index">
      <view class="list-cell list-cell-arrow border-radius" @click="goOperationDetail(item)">
        <view class="flex flex-row-sb-c">
          <view>
            <text>[{{ index + 1 }}] </text>
            <text>{{ item.positionName }} </text>
            <text>({{ item.totalItemNum - item.noDealTotalItemNum || 0 }}/{{ item.totalItemNum || 0 }}) </text>
          </view>
          <view>
            <text
              :class="
                item.positionStatus == 2 || item.positionStatus == 4
                  ? 'red-content'
                  : item.positionStatus == 3
                  ? 'yellow-content'
                  : 'blue-content'
              "
              >{{ exceptionNum(item) }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="background-white bor-top" v-if="baseInfo.overallCommentFlag == 1">
      <view class="content-wrap bor-btm">
        <view class="label text">总评：</view>
        <view class="value text">{{ baseInfo.overallComment }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryTaskDetail } from '@/api/equipment/Inspection-new'
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'operationSpotCheck',
  components: {
    Empty
  },
  data() {
    return {
      subTaskId: '',
      baseInfo: {},
      positionDealList: []
    }
  },
  onLoad({ subTaskId }) {
    this.subTaskId = subTaskId
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  onShow() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      queryTaskDetail(this.subTaskId).then((res) => {
        this.baseInfo = res.data && res.data.baseInfo ? res.data.baseInfo : {}
        this.positionDealList = res.data && res.data.positionDealList ? res.data.positionDealList : []
      })
    },
    commentFlag(overallCommentFlag) {
      if (overallCommentFlag == 0) {
        return '否'
      }
      return '是'
    },
    exceptionNum(item) {
      if (item.positionStatus == 2) {
        return `${item.exceptionNum}个异常`
      }
      return item.positionStatusLabel
    },
    goOperationDetail(item) {
      uni.navigateTo({
        url:
          '/pages/work/inspectTask/components/locationDetail?subTaskPositionId=' +
          item.id +
          '&positionName=' +
          item.positionName
      })
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }
    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}
.red-content {
  color: rgb(227, 12, 12);
}
.yellow-content {
  color: rgba(243, 197, 27, 1);
}
.blue-content {
  color: rgb(122, 199, 86);
}
.submit-group {
  background: #fff;
  padding: 20px;
}
uni-text {
  margin-right: 25rpx;
}
.form-text {
  color: rgba(17, 200, 229, 1);
  padding-left: 10px;
  box-sizing: border-box;
}
.content-wrap {
  display: flex;
  min-height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  .label {
    color: #999999;
  }
  .value {
    flex: 1;
    color: #333333;
    word-break: break-all;
  }
}
</style>
